<template>
    <el-dialog 
      v-model="visible" 
      :title="`考核详情: ${examTitle}`" 
      width="65%" 
      top="5vh"
      :before-close="handleClose">
      
      <div class="summary-box">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="总得分">
            <el-tag type="success" size="large">{{ submissionInfo.totalScore ?? 'N/A' }} / 100</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="交卷时间">{{ formatDate(submissionInfo.submitTime) }}</el-descriptions-item>
          <el-descriptions-item label="批改状态">
            <el-tag :type="submissionInfo.gradingStatus === 'completed' ? 'success' : 'warning'">
              {{ submissionInfo.gradingStatus === 'completed' ? '已完成' : '待批改' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
  
      <div class="question-detail-list">
        <div v-for="item in questionList" :key="item.question.id" class="question-item">
          <div class="question-header">
            <span>{{ item.question.sequence }}.【{{ getQuestionTypeName(item.question.questionType) }}】</span>
            <span class="points">本题得分：<strong :class="getScoreColor(item.examAnswer, item.question)">{{ item.examAnswer?.score ?? '未批改' }}</strong> / {{ item.question.points }}分</span>
          </div>
          <p class="content">{{ item.question.content }}</p>
          
          <div class="answer-box">
            <div class="answer-row">
              <el-tag type="info" effect="dark" class="answer-tag">你的答案</el-tag>
              <span class="answer-content student-answer">{{ item.examAnswer?.content || '未作答' }}</span>
            </div>
            <div class="answer-row">
              <el-tag type="success" effect="dark" class="answer-tag">标准答案</el-tag>
              <span class="answer-content">{{ item.question.referenceAnswer }}</span>
            </div>
          </div>
        </div>
      </div>
  
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleClose">关 闭</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, computed, watch } from 'vue';
  
  const props = defineProps({
    modelValue: Boolean,
    submissionData: { type: Object, default: () => null }
  });
  const emit = defineEmits(['update:modelValue']);
  
  // --- v-model 控制弹窗显示 ---
  const visible = ref(props.modelValue);
  watch(() => props.modelValue, (val) => { visible.value = val; });
  const handleClose = () => { emit('update:modelValue', false); };
  
  // --- 计算属性，安全地获取数据 ---
  const submissionInfo = computed(() => props.submissionData?.examSubmission || {});
  const questionList = computed(() => {
      if(!props.submissionData?.examQuestionAnswerVos) return [];
      return props.submissionData.examQuestionAnswerVos.sort((a,b) => a.question.sequence - b.question.sequence);
  });
  const examTitle = computed(() => questionList.value[0]?.question.title || '加载中...');
  
  
  // --- 辅助函数 ---
  const getQuestionTypeName = (type) => {
    const map = { single_choice: '单选题', multi_choice: '多选题', true_false: '判断题', fill_blank: '填空题', short_answer: '简答题', essay: '论述题' };
    return map[type] || '其他题型';
  };
  
  const formatDate = (dateString) => {
    if (!dateString) return "N/A";
    return new Date(dateString).toLocaleString();
  };
  
  const getScoreColor = (answer, question) => {
    if (answer?.score === null || answer?.score === undefined) return '';
    if (answer.score === question.points) return 'score-correct';
    if (answer.score > 0) return 'score-partial';
    return 'score-wrong';
  };
  </script>
  
  <style scoped>
  .summary-box {
    margin-bottom: 24px;
  }
  .question-detail-list {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 10px;
  }
  .question-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .question-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 12px;
  }
  .content {
    line-height: 1.6;
    color: #333;
  }
  .answer-box {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 12px;
    margin-top: 12px;
  }
  .answer-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  .answer-row:last-child {
    margin-bottom: 0;
  }
  .answer-tag {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
  }
  .answer-content {
    margin-left: 16px;
    font-family: 'Courier New', Courier, monospace;
  }
  .student-answer {
    color: var(--el-color-primary);
    font-weight: bold;
  }
  .score-correct { color: var(--el-color-success); }
  .score-partial { color: var(--el-color-warning); }
  .score-wrong { color: var(--el-color-danger); }
  </style>